<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 表单绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .form-container { max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; }
        .form-group { margin: 15px 0; }
        label { display: block; margin: 5px 0; }
        input, select { width: 100%; padding: 8px; margin: 5px 0; }
        .preview { background: #f5f5f5; padding: 15px; margin: 15px 0; }
    </style>
</head>
<body>
    <div id="app">
        <div class="form-container">
            <h3>用户注册表单</h3>
            
            <div class="form-group">
                <label>用户名:</label>
                <input type="text" placeholder="请输入用户名">
            </div>
            
            <div class="form-group">
                <label>邮箱:</label>
                <input type="email" placeholder="请输入邮箱">
            </div>
            
            <div class="form-group">
                <label>性别:</label>
                <label><input type="radio" value="male"> 男</label>
                <label><input type="radio" value="female"> 女</label>
            </div>
            
            <div class="form-group">
                <label>兴趣爱好:</label>
                <label><input type="checkbox" value="reading"> 阅读</label>
                <label><input type="checkbox" value="sports"> 运动</label>
                <label><input type="checkbox" value="music"> 音乐</label>
            </div>
            
            <div class="form-group">
                <label>城市:</label>
                <select >
                    <option value="">请选择城市</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>备注:</label>
                <textarea  rows="3" placeholder="请输入备注"></textarea>
            </div>
            
            <button >提交</button>
            <button >重置</button>
            
            <div class="preview">
                <h4>表单数据预览:</h4>
                <pre>显示json数据</pre>
            </div>
        </div>
    </div>

    <script>
     
    </script>
</body>
</html>